<template>
  <div class="sel_area">
    <headTop :headClass="'white_header'" ref="areaTop">Choose mobile phone</headTop>
    <ul class="area_list">
      <li class="area_item" v-for="(item, index) in area" :key="index">
        <p class="item_title" ref="areaTitle">{{item.title}}</p>
        <div class="item_list">
          <div class="item" v-for="(ele, index1) in item.list" :key="index1" @click="getArea(index, index1)">
            <span>{{ele.name}}</span>
            <span>+{{ele.tel}}</span>
          </div>
        </div>
      </li>
    </ul>
    <ul class="select_list">
      <li class="select_item" v-for="(item, index) in selectList" :key="index" @click="selectTitle(index)">
        {{item}}
        <div class="list" v-if="selectIndex === index">{{item}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import areaJson from '../json/country.json';
export default {
  name: 'selectArea',
  data () {
    return {
      area: areaJson,
      selectIndex: '',
      selectList: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    };
  },
  methods: {
    // Select initial letter
    selectTitle (index) {
      clearTimeout(this.timer);
      this.selectIndex = index;
      this.timer = setTimeout(() => {
        this.selectIndex = '';
      }, 1000);
      this.countScroll(index);
    },
    // Calculate height Scroll to corresponding height
    countScroll (index) {
      let topHeight = document.querySelector('.header_wrap').offsetHeight;
      let titleHeight = this.$refs.areaTitle[index].offsetTop;
      document.querySelector('#content').scrollTop = titleHeight - topHeight;
    },
    // Get country and telephone area code
    getArea (i, index) {
      if (localStorage.areaCode) {
        localStorage.removeItem('areaCode');
      }
      if (this.area[i].list[index].name !== 'China') {
        this.Toast('This area is not open.');
        return false;
      }
      let areaCode = {};
      areaCode.country = this.area[i].list[index].name;
      areaCode.tel = this.area[i].list[index].tel;
      console.log(areaCode);
      localStorage.areaCode = JSON.stringify(areaCode);
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .sel_area {
    padding-top: 88px;
    .white_header{
      white-space: nowrap;
    }
    .area_list{
      .area_item{
        .item_title{
          line-height:78px;
          font-size:24px;
          color:$color;
          padding:0 30px;
          // background-color: #f5f5f5;
        }
        .item_list{
          background-color:#fff;
          padding:0 30px;
          border-bottom:1px solid #e6e6e6;
          .item{
            line-height:106px;
            font-size:28px;
            border-bottom:1px solid #e6e6e6;
            &:last-child{
              border:0;
            }
          }
        }
      }
    }
    .select_list{
      position:fixed;
      top:50%;
      right:0;
      z-index:10;
      transform:translateY(-50%);
      width:50px;
      font-size:22px;
      line-height:32px;
      color:$color;
      text-align:center;
      .select_item{
        position:relative;
        .list{
          position:absolute;
          font-size:36px;
          width:80px;
          height:80px;
          background:rgba(0, 0, 0, 0.6);
          color:#fff;
          line-height:80px;
          border-radius: 40px;
          left:-80px;
          top:-24px;
        }
      }
    }
  }
</style>
